<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: skyblue;

            position: absolute;
            left: 0;
            top: 0;

            transition: all 1s linear;
        }

        p {
            width: 300px;
            height: 300px;
            background-color: orange;

            position: absolute;

            left: 500px;
            top: 500px;
            transition: all 1s linear;
        }
    </style>
</head>

<body>
    <div draggable="true"></div>
    <p></p>
    <script>
        // 在浏览器内部 发生了拖拽行为  
        // 拖拽有可能关联两个元素 
        // 拖拽 你正在拖着的元素
        // 拖放 你松手后放下的元素 

        // 事件源 必须是 可拖拽的 才能触发拖拽事件  
        // 如何让一个元素可以拖拽  
        // => draggable="true"
        var divEle = document.querySelector('div');
        var pEle = document.querySelector('p');

        // dragstart 
        // 即将进入移动状态的瞬间触发 
        // divEle.ondragstart  = function(){
        //     console.log('你要拖我走么?')
        // }
        // drag 
        // 拖拽的元素在移动的时候 实时触发 
        divEle.ondrag = function () {
            console.log('你正在拖着我走?')
        }
        // // dragend
        // // 拖拽元素放手的时候触发 
        // divEle.ondragend  = function(){
        //     console.log('你放手了 ?')
        // }



        // 拖放 

        // dragenter 
        // 拖拽元素进入到拖放元素范围的时候才触发 光标进入
        // pEle.ondragenter = function(){
        //     console.log('进入了');
        // } 
        // dragleave
        // 拖拽元素离开到拖放元素范围的时候才触发 光标离开
        // pEle.ondragleave = function(){
        //     console.log('离开了');
        // } 

        // dragover 
        // // // 拖拽元素完全进入到拖放元素范围的时候才触发  
        // pEle.ondragover = function(){
        //     // console.log('吻合');
        //     return false
        // } 
        // // drop

        // // 需要在dragover 进行阻止默认行为
        // // 因为drop 会被dragover影响  如果想触发drop 
        // // 就必须消除 over的影响 
        // pEle.ondrop = function(){
        //     console.log('放手');
        // } 
        // 进行drop 也要先绑定一个dragover事件
        pEle.ondragover = function () {
            return false
        }
        pEle.ondrop = function () {

            var left = window.getComputedStyle(divEle).left;
            var top = window.getComputedStyle(divEle).top;

            divEle.style.left = window.getComputedStyle(pEle).left;
            divEle.style.top = window.getComputedStyle(pEle).top;

            pEle.style.left = left
            pEle.style.top = top

        }
    </script>

</body>

</html>